<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>抽签器（37签）</title>
<style>
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#fafafa;margin:0;padding:16px;}
h1{font-size:20px;margin-bottom:8px;}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;margin-bottom:12px;}
.label{color:#555;margin-bottom:6px;}
.row{display:flex;gap:10px;align-items:center;margin-top:8px;}
.input{flex:1;border:1px solid #ddd;border-radius:8px;padding:8px;}
.pill{background:#ecfeff;color:#0e7490;padding:6px 10px;border-radius:999px;font-size:12px;}
.out{font-size:32px;font-weight:bold;text-align:center;padding:16px;border:2px dashed #ddd;border-radius:12px;margin-top:8px;}
.btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:16px;cursor:pointer;}
.ok{background:#10b981;color:#fff;}
.warn{background:#ef4444;color:#fff;}
.ghost{background:#f1f5f9;color:#111;}
.li{padding:4px 0;border-bottom:1px dashed #eee;}
.muted{font-size:12px;color:#888;}
</style>
</head>
<body>
<h1>🎲 自动发签（共37签）</h1>
<!-- 已移除提示文字 -->

<div class="card">
  <div class="label">当前抽签</div>
  <div class="row">
    <input id="nameInput" class="input" placeholder="输入抽签者姓名（可留空）">
    <span id="leftPill" class="pill">剩余：0</span>
  </div>
  <div id="bigOut" class="out">尚未开始</div>
  <div class="row">
    <button class="btn ok" onclick="drawOne()">👉 下一位抽签</button>
    <button class="btn ghost" onclick="undo()">撤回</button>
    <button class="btn warn" onclick="resetAll()">重置</button>
  </div>
</div>

<div class="card">
  <div class="label">抽签记录（<span id="recordCount">0</span> 条）</div>
  <ol id="recordList"></ol>
  <div class="row">
    <button class="btn ghost" onclick="copyText()">复制结果</button>
    <button class="btn ghost" onclick="reshuffleRest()">仅重洗剩余</button>
  </div>
</div>

<script>
const reserved = {"马慧婷":"22","朱雪盈":"34"};
const reservedRev = {"22":"马慧婷","34":"朱雪盈"};
let assignedReserved={},pool=[],history=[],allTickets=[];

// 初始化 37签
function init(){
  allTickets=Array.from({length:37},(_,i)=>String(i+1));
  pool=shuffle(allTickets.filter(t=>!reservedRev[t]));
  history=[];assignedReserved={};
  document.getElementById("bigOut").textContent="已洗牌，开始发签";
  update();
}
function shuffle(arr){for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[arr[i],arr[j]]=[arr[j],arr[i]];}return arr;}
function ts(){const d=new Date();const p=n=>String(n).padStart(2,'0');return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;}
function update(){document.getElementById("leftPill").textContent="剩余："+calcLeft();document.getElementById("recordCount").textContent=history.length;const ul=document.getElementById("recordList");ul.innerHTML="";history.forEach((it,i)=>{const li=document.createElement("li");li.className="li";li.textContent=`${i+1}. ${it.name?it.name+"：":""}${it.ticket}（${it.time}）`;ul.appendChild(li);});}
function calcLeft(){return pool.length+(Object.keys(reserved).length-Object.keys(assignedReserved).length);}

function drawOne(){
  if(calcLeft()===0){alert("签已发完");return;}
  const name=document.getElementById("nameInput").value.trim();
  let ticket=null;
  if(name&&reserved[name]&&!assignedReserved[name]){
    ticket=reserved[name];assignedReserved[name]=true;
  }else{
    if(pool.length===0){alert("剩余签需输入对应姓名领取");return;}
    ticket=pool.pop();
  }
  history.push({name,ticket,time:ts()});
  document.getElementById("bigOut").textContent=ticket;
  document.getElementById("nameInput").value="";
  update();
}
function undo(){
  if(!history.length){alert("没有可撤回的记录");return;}
  const last=history.pop();
  if(reservedRev[last.ticket]&&reserved[last.name]===last.ticket){delete assignedReserved[last.name];}
  else{pool.push(last.ticket);shuffle(pool);}
  document.getElementById("bigOut").textContent="撤回："+last.ticket;
  update();
}
function resetAll(){init();document.getElementById("nameInput").value="";}
function reshuffleRest(){if(pool.length<2){alert("剩余签不足以重洗");return;}shuffle(pool);alert("已重洗 ✅");}
function copyText(){if(!history.length){alert("没有记录");return;}const text=history.map((it,i)=>`${i+1}. ${it.name?it.name+"：":""}${it.ticket}（${it.time}）`).join("\n");navigator.clipboard.writeText(text).then(()=>alert("已复制")).catch(()=>alert("复制失败"));}

init();
</script>
</body>
</html>
